<template>
    <div id="ant-register-box">
        <a-form ref="formRef" name="custom-validation" :model="formState" :rules="rules" label-align="left"
            :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" @finish="handleFinish" @validate="handleValidate"
            @finishFailed="handleFinishFailed">
            <a-form-item has-feedback label="用户名" name="username">
                <a-input v-model:value="formState.username" placeholder="请输入用户名" />
            </a-form-item>
            <a-form-item has-feedback label="密码" name="password">
                <a-input-password v-model:value="formState.password" type="password" autocomplete="off"
                    placeholder="请输入密码" />
            </a-form-item>
            <a-form-item has-feedback label="确认密码" name="checkPassword">
                <a-input-password v-model:value="formState.checkPassword" type="password" autocomplete="off"
                    placeholder="确认密码" />
            </a-form-item>

            <a-form-item :wrapper-col="{ span: 16, offset: 8 }">
                <a-button type="primary" html-type="submit">注册</a-button>

            </a-form-item>
        </a-form>

    </div>

</template>
<script setup>
    import { reactive, ref } from 'vue';
    import { userRegister } from '@/api/user'
    import { useRouter } from 'vue-router'
    const router = useRouter()
    const formRef = ref()
    const formState = reactive({
        password: '',
        checkPassword: '',
        username: '',
    })
    let username_reg = /^\S{1,20}$/
    const checkUsername = async (_rule, value) => {
        if (!value) {
            return Promise.reject('请输入用户名')
        }
        if (value.length > 20) {
            return Promise.reject('用户名不能大于20个字符')
        }
        if (!username_reg.test(value)) {
            return Promise.reject('用户名不能包含空白字符')
        }
        return Promise.resolve()


    }
    // 密码不少于8位，包含且仅包含数字及大小写字母
    let password_reg = /^[0-9a-zA-Z]{8,20}$/
    let digit = /[0-9]/
    let lower = /[a-z]/
    let upper = /[A-Z]/
    const isValidPassword = (password) => {
        return password_reg.test(password) && digit.test(password) &&
            lower.test(password) && upper.test(password)
    }
    const checkPassword = async (_rule, value) => {
        if (value.length < 8) {
            return Promise.reject('密码不少于8位')
        }
        if (value.length > 20) {
            return Promise.reject('密码不大于20位')
        }
        if (!isValidPassword(value)) {
            return Promise.reject('密码必须包含且仅包含数字及大小写字母')
        }

        return Promise.resolve()

    }
    const validatePass2 = async (_rule, value) => {
        if (value === '') {
            return Promise.reject('请再次输入密码')
        } else if (value !== formState.password) {
            return Promise.reject("两次输入的密码不相同")
        } else {
            return Promise.resolve()
        }
    }
    const rules = {
        password: [
            {
                required: true,
                validator: checkPassword,
                trigger: 'change',
            },
        ],
        checkPassword: [
            {
                required: true,
                validator: validatePass2,
                trigger: 'change',
            },
        ],
        username: [
            {
                required: true,
                validator: checkUsername,
                trigger: 'change',
            },
        ],
    };

    const handleSubmit = () => {
        userRegister(formState).then(async res => {
            // console.log(res.data)
            if (res.data.code === 0) {
                alert('注册成功')
                router.push({
                    path: '/login/log'
                })
            } else {
                alert(res.data.msg)
            }

        })
    }

    const handleFinish = values => {
        console.log('handleFinish-> ', values)
        handleSubmit()
    };
    const handleFinishFailed = errors => {
        console.log('handleFinishFailed-> ', errors)
    };

    const handleValidate = (...args) => {
        console.log(args)
    };


</script>

<style scoped lang="less">
    #ant-register-box {
        display: flex;
        height: 300px;
        width: 300px;
        justify-content: center;
        align-items: center;
        padding: 30px;
        border-radius: 20px;
        background-color: rgba(255, 255, 255, 0.84);
        flex-direction: column;
    }
</style>